<template>
  <div class="order_confirm wrapper_1200">
    <div class="header">
      <span class="home"
        >{{ $t("page.goodsDetail.home") }} >
        <span v-if="!news">{{ $t("page.goodsDetail.cart") }} > </span>
      </span>
      {{ $t("page.orderDetails.Submit") }}
    </div>
    <div class="address">
      <div class="title">{{ $t("page.orderDetails.address") }}</div>
      <div class="lines">
        <img src="../assets/images/line.png" />
      </div>
      <div class="list acea-row row-middle" :class="isShow ? 'on' : ''">
        <div
          class="item"
          :class="current === index ? 'on' : ''"
          v-for="(item, index) in addressList"
          :key="index"
          @click="tapCurrent(index, item)"
        >
          <div class="default bg-color" v-if="item.is_default">
            {{ $t("page.goodsSearch.Default") }}
          </div>
          <div class="name line1">{{ item.real_name }}</div>
          <div class="phone">{{ item.phone }}</div>
          <div class="details line4">
            {{ item.province }}{{ item.city }}{{ item.district
            }}{{ item.detail }}
          </div>
          <div
            class="iconfont icon-xuanzhong4 font-color"
            v-if="current === index"
          ></div>
        </div>
        <div class="item add" @click="addAddress">
          <div class="iconfont icon-dizhi-tianjia"></div>
          <div class="tip">{{ $t("page.users.userAddressList.add") }}</div>
        </div>
      </div>
    </div>
    <div class="isShow" @click="open" v-if="!isShow && addressList.length > 3">
      {{$t('page.index.showaddresses')}}<span class="iconfont icon-xiangxia"></span>
    </div>
    <div style="margin-top: 10px" v-if="addressList.length <= 3"></div>
    <div class="isShow" @click="close" v-if="isShow && addressList.length > 3">
      {{$t('page.index.hideaddresses')}}<span class="iconfont icon-xiangshang"></span>
    </div>
    <div class="wrapper wrapper_1200">
      <div class="wrapper_count">
        <div class="title">{{ $t("page.goodsAddcart.orderinfo") }}</div>
        <div class="order">
          <div class="list">
            <div
              class="cartCount"
              v-for="(item, index) in cartInfo"
              :key="index"
            >
              <div class="storeInfo acea-row row-between-wrapper">
                <div class="name">{{ item.mer_name }}</div>
                <div class="service" @click="goChat(item)">
                  {{ $t("page.user.contact") }}
                  <span class="iconfont icon-lianxikefu"></span>
                </div>
                <!-- <div class="qrcode">
                  <client-only>
                    <vue-qr
                      :text="
                        $store.state.domain +
                          'pages/chat/customer_list/chat?mer_id=' +
                          item.mer_id
                      "
                      :size="180"
                    ></vue-qr>
                  </client-only>
                </div> -->
              </div>
              <div class="cartInfo">
                <div
                  class="item"
                  v-for="(itemn, indexn) in item.list"
                  :key="indexn"
                >
                  <div
                    class="acea-row row-between-wrapper"
                    v-if="itemn.product_type == 2"
                  >
                    <div class="txtPic acea-row row-middle">
                      <div class="pictrue">
                        <img
                          :src="itemn.productPresellAttr.image"
                          v-if="itemn.productPresellAttr.image"
                        />
                        <img :src="itemn.product.image" v-else />
                        <span>{{$t('page.index.presale')}}</span>
                      </div>
                      <div class="text">
                        <div class="name line1">
                          {{ itemn.productPresell.store_name }}
                        </div>
                        <div class="info" v-if="itemn.productAttr">
                          {{ itemn.productAttr.sku }}
                        </div>
                        <div class="info" v-else>
                          {{ $t("page.goodsSearch.Default") }}
                        </div>
                        <div
                          class="err-txt acea-row"
                          v-if="itemn.undelivered && addressInfo.real_name"
                        >
                          <span class="iconfont icon-tishi"></span>
                          <div class="txt">{{$t('page.index.tips9')}}</div>
                        </div>
                        <div class="ship_date">
                          <!--全款预售-->
                          <span v-if="itemn.productPresell.presell_type === 1"
                            >{{
                              itemn.productPresell.delivery_type === 1
                                ? $t('page.index.afterpayment')
                                : $t('page.index.resaleends')
                            }}{{ itemn.productPresell.delivery_day }}{{$t('page.index.days')}}</span
                          >
                          <!--定金预售-->
                          <span v-if="itemn.productPresell.presell_type === 2"
                            >{{
                              itemn.productPresell.delivery_type === 1
                                ? $t('page.index.afterpayments')
                                : $t('page.index.resaleends')
                            }}{{ itemn.productPresell.delivery_day }}{{$t('page.index.days')}}</span
                          >
                        </div>
                      </div>
                    </div>
                    <div class="acea-row row-middle">
                      <div class="money_count">
                        <span
                          class="money"
                          v-if="
                            itemn.productPresellAttr &&
                              itemn.productPresellAttr.presell_price
                          "
                          >${{ itemn.productPresellAttr.presell_price }}</span
                        >
                        <span class="money" v-else>{{
                          itemn.product.price
                        }}</span>
                        <span class="num">x{{ itemn.cart_num }}</span>
                      </div>
                      <div>
                        <span
                          v-if="itemn.productPresell.presell_type === 1"
                          class="font-color"
                          >{{ itemn.productPresellAttr.presell_price }}</span
                        >
                        <div v-if="itemn.productPresell.presell_type === 2">
                          <div class="acea-row row-middle">
                            <span class="money_down">{{$t('page.index.deposit')}}</span
                            ><span class="font-color"
                              >${{
                                (
                                  itemn.productPresellAttr.down_price *
                                  itemn.cart_num
                                ).toFixed(2)
                              }}</span
                            >
                          </div>
                          <div class="money_final">
                            ({{$t('page.index.finalpayment')}}${{
                              (
                                itemn.productPresellAttr.final_price *
                                itemn.cart_num
                              ).toFixed(2)
                            }})
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div v-else class="acea-row row-between-wrapper">
                    <div class="txtPic acea-row row-middle">
                      <div class="pictrue">
                        <img
                          :src="itemn.productAttr.image"
                          v-if="itemn.productAttr.image"
                        />
                        <img :src="itemn.product.image" v-else />
                      </div>
                      <div class="text">
                        <div class="name line2">
                          {{ itemn.product['store_name_'+lang] ? itemn.product['store_name_'+lang] : itemn.product.store_name }}
                        </div>
                        <div class="info" v-if="itemn.productAttr">
                          {{ itemn.productAttr.sku }}
                        </div>
                        <div class="info" v-else>
                          {{ $t("page.goodsSearch.Default") }}
                        </div>
                        <div
                          class="err-txt acea-row"
                          v-if="itemn.undelivered && addressInfo.real_name"
                        >
                          <span class="iconfont icon-tishi"></span>
                          <div class="txt">{{$t('page.index.tips9')}}</div>
                        </div>
                      </div>
                    </div>
                    <div>
                      <span
                        class="money"
                        v-if="itemn.productAttr && itemn.productAttr.price"
                        >${{ itemn.productAttr.price }}</span
                      >
                      <span class="money" v-else>{{
                        itemn.product.price
                      }}</span>
                      <span class="num">x{{ itemn.cart_num }}</span>
                      <span class="font-color">{{
                        itemn.productAttr.price
                      }}</span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="coupon">
                <div
                  v-if="
                    order_type != 3 &&
                      order_type != 4 &&
                      item.coupon.length &&
                      item.order.enabledCoupon
                  "
                  class="couponTitle acea-row row-between-wrapper"
                >
                  <div>{{$t('page.index.useacoupon')}}</div>
                  <div class="couponPrice font-color">
                    -${{ item.order.coupon_price }}
                  </div>
                  <!--<div class="couponPriceNo font-color" v-else>无可使用优惠券</div>-->
                </div>
                <div
                  v-if="item.coupon.length > 0"
                  class="couponList acea-row row-middle"
                >
                  <div
                    class="item acea-row row-middle"
                    :class="itemn.disabled ? 'disabled' : ''"
                    v-for="(itemn, indexn) in item.coupon"
                    :key="indexn"
                    @click="getCoupon(itemn)"
                  >
                    <div class="name" v-if="itemn.coupon.type">
                      {{ $t("page.index.Commodityvoucher") }}
                    </div>
                    <div class="name" v-else>
                      {{ $t("page.index.shopvoucher") }}
                    </div>
                    <div class="money line1">
                      {{ $t("page.index.full") }}{{ itemn.use_min_price }}{{$t('page.index.reduce')}}{{
                        parseFloat(itemn.coupon_price)
                      }}
                    </div>
                    <div
                      class="iconfont icon-xuanzhong4 font-color"
                      v-if="itemn.checked"
                    ></div>
                  </div>
                </div>
              </div>
              <div class="coupon">
                <div class="couponTitle acea-row row-between-wrapper">
                  <div>
                    {{ $t("page.orderDetails.freight") }}
                    <span
                      v-if="
                        item.list[0].productPresell &&
                          item.list[0].productPresell.presell_type == 2 &&
                          item.order.postage_price > 0
                      "
                      >({{$t('page.index.finalpaymentstage')}}）</span
                    >
                  </div>
                  <div
                    class="couponPrice font-color"
                    v-if="item.order.postage_price > 0"
                  >
                    +${{ item.order.postage_price }}
                  </div>
                  <div class="couponPriceNo font-color" v-else>
                    {{ $t("page.users.orderConfirm.free") }}
                  </div>
                </div>
              </div>
              <div
                v-if="
                  order_type === 2 &&
                    item.list[0].productPresell.presell_type == 2
                "
                class="coupon"
              >
                <div class="couponTitle acea-row row-between-wrapper">
                  <div class="presell_protocol" @click="getPresellAgree">
                    <span class="iconfont icon-wenhao1"></span>
                    {{$t('page.index.tips10')}}
                  </div>
                  <div class="checkbox-wrapper check_protocal">
                    <label class="well-check">
                      <input
                        type="checkbox"
                        name=""
                        value=""
                        :checked="isAgree"
                        @change="changeIsAgree"
                      />
                      <i class="icon"></i>
                    </label>
                  </div>
                </div>
              </div>
              <div class="coupon">
                <div class="couponTitle acea-row">
                  <div>{{ $t("page.orderDetails.sendMethod") }}</div>
                  <div
                    class="acea-row list develivery"
                    v-if="item.delivery_way.length == 2"
                  >
                    <div
                      class="deliviery_item"
                      :class="!item.order.isTake ? 'checked' : ''"
                      @click="getDevelivery(item, 0, index, 0)"
                    >
                      <div class="cont">
                        <div class="acea-row row-middle name">
                          {{ $t("page.users.orderConfirm.express") }}
                        </div>
                        <div
                          class="iconfont icon-xuanzhong4"
                          v-if="!item.order.isTake"
                        ></div>
                      </div>
                    </div>
                    <div
                      class="deliviery_item"
                      :class="item.order.isTake ? 'checked' : ''"
                      @click="getDevelivery(item, 1, index, 1)"
                    >
                      <div class="cont">
                        <div class="acea-row row-middle name">
                          {{ $t("page.users.orderConfirm.magasin") }}
                        </div>
                        <div
                          class="iconfont icon-xuanzhong4"
                          v-if="item.order.isTake"
                        ></div>
                      </div>
                    </div>
                  </div>
                  <div
                    class="acea-row list develivery"
                    v-if="item.delivery_way.length == 1"
                  >
                    <div class="deliviery_item checked">
                      <div class="cont">
                        <div class="acea-row row-middle name">
                          {{
                            item.delivery_way[0] == 1
                              ? $t("page.users.orderConfirm.magasin")
                              : $t("page.users.orderConfirm.express")
                          }}
                        </div>
                        <div class="iconfont icon-xuanzhong4"></div>
                      </div>
                    </div>
                  </div>
                </div>
                <div v-if="item.order.isTake" class="develivery_take">
                  <span class="iconfont icon-dizhi"></span>
                  <div>{{ item.take.mer_take_address }}</div>
                </div>
              </div>
              <div class="coupon invoice" v-if="item.openReceipt == 1">
                <div class="couponTitle acea-row">
                  <div>{{$t('page.ticket.invoicetype')}} </div>
                  <div class="acea-row list develivery">
                    <div
                      class="deliviery_item"
                      :class="!item.invoiceData.checked ? 'checked' : ''"
                      @click="noInvoice(item, index)"
                    >
                      <div class="cont">
                        <div class="acea-row row-middle name">{{$t('page.index.noinvoice')}}</div>
                        <div
                          class="iconfont icon-xuanzhong4"
                          v-if="!item.invoiceData.checked"
                        ></div>
                      </div>
                    </div>
                    <div
                      class="deliviery_item"
                      :class="
                        item.invoiceData && item.invoiceData.checked
                          ? 'checked'
                          : ''
                      "
                      @click="showInvoicePupon(item, index)"
                    >
                      <div class="cont">
                        <div class="acea-row row-middle name">{{$t('page.index.electronicinvoice')}}</div>
                        <div
                          class="iconfont icon-xuanzhong4"
                          v-if="item.invoiceData && item.invoiceData.checked"
                        ></div>
                      </div>
                    </div>
                  </div>
                  <div
                    v-if="
                      item.invoiceData &&
                        item.invoiceData.receipt_title &&
                        item.invoiceData.checked
                    "
                    class="invoice_data font-color"
                  >
                    <div
                      v-if="item.invoiceData.receipt_title"
                      class="data_item"
                    >
                      {{
                        item.invoiceDatareceipt_type == 1
                          ? $t('page.index.electronicgeneralinvoice')
                          : $t('page.index.vatinvoice')
                      }}{{ item.invoiceData.receipt_title }}
                    </div>
                    <div class="data_item">
                      {{
                        item.invoiceData.receipt_title_type == "1"
                          ? $t('page.ticket.personal')
                          : $t('page.ticket.enterprise')
                      }}
                    </div>
                    <div
                      class="data_item modify"
                      @click="changeInvoiceData(item)"
                    >
                      {{$t('page.users.userAddressList.edit')}}
                    </div>
                  </div>
                </div>
                <div
                  class="invoice_info"
                  @click="
                    invoiceVisible = true;
                    isPresell = false;
                  "
                >
                  <span class="iconfont icon-wenhao">?</span>
                  {{$t('page.index.invoicedes')}} >>
                </div>
              </div>
              <div class="coupon message acea-row">
                <div class="msgTitle">
                  {{ $t("page.orderDetails.message") }}
                </div>
                <textarea
                  class="textarea"
                  :placeholder="$t('page.orderDetails.message')"
                  v-model="item.mark"
                  maxlength="150"
                ></textarea>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="wrapper_count">
        <div class="integral_count" v-if="open_integral && order_type == 0">
          <div class="integral_title">
            {{ $t("page.orderDetails.point") }}：
          </div>
          <div class="money acea-row">
            <div class="checkbox-wrapper">
              <label class="well-check">
                <input
                  type="checkbox"
                  name=""
                  value=""
                  :checked="use_integral"
                  @change="changeIntegral"
                />
                <i class="icon"></i>
              </label>
            </div>
            <span v-if="userInfo.integral > 0"
              >{{ $t("page.users.userIntegral.now")
              }}<span class="font-color">{{ userInfo.integral }}</span></span
            >
            <span v-if="use_integral" class="integral_price">
              <span>{{$t('page.index.used')}}{{ integral_count }}{{$t('page.index.pointsdeductible')}}</span
              ><span v-if="userInfo.integral > 0" class="font-color"
                >{{ integral_price }}{{$t('page.index.yuan')}}</span
              >
              <span v-else class="font-color">{{$t('page.index.nopoints')}}</span>
            </span>
          </div>
        </div>
        <div class="totalCon">
          <div class="total acea-row row-middle row-right">
            <div>
              <span class="font-color">{{ totalNum }} </span
              >{{ $t("page.orderDetails.item") }}，{{
                $t("page.users.orderList.totalPay")
              }}：
            </div>
            <div class="money">${{ proPrice || 0 }}</div>
          </div>
          <div
            class="total acea-row row-middle row-right"
            v-if="coupon_price > 0"
          >
            <div>{{$t('page.orderDetails.coupon')}}：</div>
            <div class="money">-${{ coupon_price }}</div>
          </div>
          <div
            class="total acea-row row-middle row-right"
            v-if="priceGroup.storePostage > 0"
          >
            <div>{{ $t("page.orderDetails.freight") }}</div>
            <div class="money">+${{ priceGroup.storePostage || 0 }}</div>
          </div>
        </div>
        <div class="totalAmount">
          {{ $t("page.orderPayStatus.payPrice") }}：<span
            class="money font-color"
            >${{ totalPrice }}</span
          >
        </div>
        <div class="bnt acea-row row-right">
          <button class="submit" @click="SubOrder($event)">
            {{ $t("page.orderDetails.Submit") }}
          </button>
        </div>
      </div>
    </div>
    <!-- 添加地址弹窗 -->
    <el-dialog
      :title="$t('page.users.userAddressList.add')"
      :visible.sync="dialogVisible"
      width="700"
      :before-close="handleClose"
    >
      <div class="form-box">
        <div class="input-item" style="width: 48%;display:inline-block">
          <el-input
            v-model="formData.name"
            maxlength="25"
            :placeholder="$t('page.users.userAddress.name')"
          ></el-input>
        </div>
        <div
          class="input-item"
          style="width: 48%;display:inline-block;margin-left: 3%"
        >
          <el-input
            v-model="formData.phone"
            :placeholder="$t('page.orderDetails.phone')"
          ></el-input>
        </div>
        <!-- <div class="input-item text-wrapper">
          <p @click="bindAdd(false)" v-if="!cityData.province.id">请选择省/市/区/街道</p>
          <p @click="bindAdd(true)" v-if="cityData.province.id" style="color: #333">
            <span v-if="cityData.province.name">{{ cityData.province.name }}</span>
            <span v-if="cityData.city.name">/{{ cityData.city.name }}</span>
            <span v-if="cityData.county.name">/{{cityData.county.name}}</span>
            <span v-if="cityData.district.name">/{{ cityData.district.name }}</span>
          </p>
          <div class="select-wrapper" v-if="isShowSelect">
            <div class="title-box" v-if="!cityData.province.id">选择省/自治区</div>
            <div class="title-box" v-if="cityData.step == 2">
              <span>{{ cityData.province.name }}</span>选择市
            </div>
            <div class="title-box" v-if="cityData.step == 3">
              <span>{{ cityData.county.name }}</span>
              <span>{{ cityData.city.name }}</span>选择区县
            </div>
            <div class="title-box" v-if="cityData.step == 4 && !stepStop">
              <span>{{ cityData.city.name }}</span>
              <span>{{ cityData.county.name }}</span>请选择配送区域
            </div>
            <div class="label-txt">
              <span v-for="(item,index) in cityData.list" :key="index" @click="bindCity(item)" :class="{on:cityData.pid == item.id}">{{ item.name }}</span>
            </div>
          </div>
        </div> -->
        <div class="input-item">
          <el-input
            type="textarea"
            rows="3"
            v-model="formData.con"
            :placeholder="$t('page.users.userAddress.address')"
          ></el-input>
        </div>
        <div class="input-item">
          <el-checkbox v-model="formData.checked">{{
            $t("page.users.userAddressList.default")
          }}</el-checkbox>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">{{
          $t("page.goodsDetail.cancel")
        }}</el-button>
        <el-button type="primary" @click="bindSubmit">{{
          $t("page.goodsDetail.confirm")
        }}</el-button>
      </span>
    </el-dialog>
    <!-- 发票说明弹窗 -->
    <el-dialog
      :title="isPresell ? $t('page.index.presaleagreement') : $t('page.index.invoicedescription')"
      :visible.sync="invoiceVisible"
      width="900px"
      center
      :before-close="dialogClose"
    >
      <div class="invoice_container">
        <div class="invoice_description">
          <div v-if="isPresell" v-html="presell_protocal"></div>
          <div v-else v-html="invoice_data"></div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" style="width: 180px;" @click="dialogClose">{{
          $t("page.goodsDetail.confirm")
        }}</el-button>
      </span>
    </el-dialog>
    <!-- 发票信息弹窗 -->
    <el-dialog
      title="发票信息"
      :visible.sync="invoiceDialog"
      width="600px"
      :before-close="closeInvoice"
    >
      <div class="invoice_data_container">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
          @submit.native.prevent
        >
          <el-form-item :label="$t('page.ticket.invoicetype')">
            <div class="acea-row">
              <div
                v-for="(item, index) in invoiceTypeList"
                :key="index"
                class="invoice_item"
                :class="ruleForm.receipt_type == item.type ? 'checked' : ''"
              >
                <div class="acea-row cont" @click="changeInvoiceType(item)">
                  <div class="acea-row row-middle name">{{ item.name }}</div>
                  <div class="iconfont icon-xuanzhong4"></div>
                </div>
              </div>
            </div>
            <div class="invoice_type_info">
              {{
                ruleForm.receipt_type == 1
                  ? $t('page.index.tips12')
                  : $t('page.index.tips13')
              }}
            </div>
          </el-form-item>
          <el-form-item :label="$t('page.ticket.invoice')">
            <div class="acea-row">
              <div
                v-for="(item, index) in invoiceHeaderList"
                :key="index"
                class="invoice_item"
                :class="
                  ruleForm.receipt_title_type == item.type ? 'checked' : ''
                "
              >
                <div class="acea-row cont" @click="changeInvoiceHeader(item)">
                  <div class="acea-row row-middle name">{{ item.name }}</div>
                  <div class="iconfont icon-xuanzhong4"></div>
                </div>
              </div>
              <div style="margin-top: 20px; width: 100%;">
                <el-input
                  v-model="ruleForm.receipt_title"
                  :placeholder="$t('page.index.pleasetakeheader')"
                ></el-input>
              </div>
            </div>
          </el-form-item>
          <el-form-item
            v-show="ruleForm.receipt_title_type == '2'"
            :label="$t('page.index.unittaxnumber')"
          >
            <el-input
              v-model="ruleForm.duty_paragraph"
              :placeholder="$t('page.index.tips14')"
            ></el-input>
          </el-form-item>
          <el-form-item :label="$t('page.index.ticketcollectionmailbox')" prop="email">
            <el-input
              v-model="ruleForm.email"
              :placeholder="$t('page.index.pleasinremail')"
            ></el-input>
          </el-form-item>
          <div
            v-show="
              ruleForm.receipt_title_type == '2' && ruleForm.receipt_type == '2'
            "
          >
            <el-form-item :label="$t('page.ticket.depositarybank')">
              <el-input
                v-model="ruleForm.bank_name"
                :placeholder="$t('page.ticket.depositarybank')"
              ></el-input>
            </el-form-item>
            <el-form-item :label="$t('page.ticket.bankaccount')">
              <el-input
                v-model="ruleForm.bank_code"
                :placeholder="$t('page.ticket.bankaccount')"
              ></el-input>
            </el-form-item>
            <el-form-item :label-width="$t('page.ticket.companyaddress')">
              <el-input
                v-model="ruleForm.address"
                :placeholder="$t('page.ticket.companyaddress')"
              ></el-input>
            </el-form-item>
            <el-form-item :label="$t('page.ticket.businessphone')">
              <el-input
                v-model="ruleForm.tel"
                :placeholder="$t('page.ticket.businessphone')"
              ></el-input>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <span slot="footer" center class="dialog-footer">
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="confirmInvoice">{{
            $t("page.goodsDetail.confirm")
          }}</el-button>
          <el-button @click="closeInvoice">{{
            $t("page.goodsDetail.cancel")
          }}</el-button>
        </span>
      </span>
    </el-dialog>
    <ChatItem 
      v-if="$auth.loggedIn && currentChatOrder"
      :dialogVisible="chatVisible" 
      :title="currentChatOrder.mer_name" 
      :mer_id="currentChatOrder.mer_id"
      :uid="$auth.user.uid"
      @close="chatVisible = false" />
  </div>
</template>

<script>
// +----------------------------------------------------------------------
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
// +----------------------------------------------------------------------
// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
// +----------------------------------------------------------------------
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
// +----------------------------------------------------------------------
// | Author: CRMEB Team <admin@crmeb.com>
// +----------------------------------------------------------------------
import { Message } from "element-ui";
import ChatItem from "@/components/chat";
export default {
  name: "order_confirm",
  components: { ChatItem },
  auth: "guest",
  data() {
    return {
      dialogVisible: false,
      invoiceVisible: false,
      invoiceDialog: false,
      isShowSelect: false,
      invoice_data: "",
      presell_protocal: "",
      ruleForm: {
        receipt_title_type: 1, //发票抬头类型
        receipt_type: 1, //发票类型
        receipt_title: "", //发票抬头
        duty_paragraph: "", //税号
        email: "", //邮箱
        bank_name: "", //开户银行
        bank_code: "", //银行账号
        address: "", //企业地址
        tel: "" //电话
      },
      invoiceData: {},
      invoiceTypeList: [
        {
          type: "1",
          name: this.$t('page.index.vatelectronicgeneralinvoice')
        },
        {
          type: "2",
          name: this.$t('page.index.vatspecialinvoice')
        }
      ],
      invoiceHeaderList: [
        {
          type: "1",
          name: this.$t('page.ticket.personal')
        },
        {
          type: "2",
          name: this.$t('page.ticket.enterprise')
        }
      ],
      rules: {
        receipt_title: [
          { required: true, message: this.$t('page.index.pleasetakeheader'), trigger: "blur" }
        ]
      },
      formData: {
        name: "",
        phone: "",
        con: "",
        checked: false
      },
      cityData: {
        pid: 0,
        step: 1,
        list: [],
        con: "",
        province: {},
        city: {},
        county: {},
        district: {}
      },
      cityDataOrg: [],
      addressList: [],
      current: 0,
      news: 1,
      cartInfo: [],
      addressId: 0,
      useIntegral: false, //是否使用积分
      couponId: 0,
      subCoupon: {},
      order_type: "",
      computeData: {},
      userInfo: {},
      mark: {}, //备注信息
      totalNum: 0,
      priceGroup: {},
      totalPrice: 0, //最终商品金额；
      seckillId: 0,
      isShow: false,
      freight: 0,
      orderStatus: "",
      proPrice: "",
      coupon_price: "",
      addressInfo: {},
      open_integral: 0,
      coupon_number: 0,
      coupon_amount: "",
      integral_count: "",
      use_integral: false,
      integral_price: 0, //积分抵扣金额
      selectedIndex: -1,
      selectedArr: [],
      stepStop: false,
      couponIndex: 0, //选择商铺优惠券索引
      coupon: {
        status: false,
        list: []
      },
      activeIndex: "",
      take: [],
      invoiceIndex: "",
      modifyInvoice: false,
      isAgree: false,
      isPresell: false,
      currentChatOrder:'',
      chatVisible:false,
      lang:'',
    };
  },
  async asyncData({ app, query }) {
    let list = { data: [] };
    try {
      [list] = await Promise.all([
        app.$axios.get("/api/user/address/lst", {
          page: 1,
          limit: 50
        })
      ]);
    } catch (e) {}
    return {
      addressList: list.data,
      cartId: query.cartId,
      news: query.new ? 1 : 0
    };
  },
  fetch({ store }) {
    store.commit("isHeader", true);
    store.commit("isFooter", true);
  },
  head() {
    return {
      title:
        this.$t("page.users.orderList.Confirm") +
        "-" +
        this.$store.state.titleCon
    };
  },
  beforeMount() {
    this.lang = this.$cookies.get('locale') || 'en';
    if(this.lang === "zh-Hant"){
      this.lang = 'tw'
    }
    this.getAddressList();
    this.getCityList();
    this.getUserInfo();
    this.getInvoiceData();
  },
  methods: {
    goChat(info){
      this.currentChatOrder = info
      console.log("=========currentChatOrder========",info)
      if(this.$auth.loggedIn) {
        this.chatVisible = true
      } else {
        this.$message.error(this.$t("page.chat.loginHit"))
      }
    },
    // 表单重置
    formReset() {
      this.formData.name = "";
      this.formData.phone = "";
      this.formData.con = "";
      this.formData.checked = false;
      this.cityData.province = {};
      this.cityData.city = {};
      this.cityData.district = {};
      this.cityData.step = 1;
      this.cityData.pid = 0;
      this.selectedArr = [];
    },
    handleClose() {
      this.formReset();
      this.dialogVisible = false;
    },
    dialogClose() {
      this.invoiceVisible = false;
    },
    closeInvoice() {
      this.invoiceDialog = false;
      if (!this.modifyInvoice) {
        this.cartInfo[this.invoiceIndex]["invoiceData"] = {};
        this.cartInfo[this.invoiceIndex].invoiceData.checked = false;
      }
    },
    changeIsAgree: function(e) {
      this.isAgree = !this.isAgree;
    },
    bindAdd(isReset) {
      if (isReset) {
        this.cityData.step = 1;
        this.stepStop = false;
      }
      this.isShowSelect = !this.isShowSelect;
      if (this.cityData.step == 4 || this.stepStop) {
        return;
      } else {
        this.cityData.city = {};
        this.cityData.district = {};
        this.cityData.province = {};
        this.cityData.county = {};
        this.getCityList(0, null);
      }
    },
    //获取用户信息
    getUserInfo() {
      this.$axios.get(`/api/user`).then(res => {
        this.userInfo = res.data;
      });
    },
    /*获取发票信息*/
    getInvoiceData() {
      this.$axios.get("/api/cache/" + "sys_receipt_agree").then(res => {
        this.invoice_data = res.data.sys_receipt_agree;
      });
    },
    /*预售协议*/
    getPresellAgree() {
      this.isPresell = true;
      this.invoiceVisible = true;
      this.$axios.get("/api/store/product/presell/agree").then(res => {
        this.presell_protocal = res.data.sys_product_presell_agree;
      });
    },
    /*选择快递配送方式*/
    getDevelivery(item, v, index, i) {
      if ((i == 0 && !item.order.isTake) || (i == 1 && item.order.isTake))
        return;
      this.$set(item.order, "isTake", v);
      this.activeIndex = index;
      this.getData(item);
    },
    /*不开发票*/
    noInvoice(item) {
      this.$set(this.cartInfo[this.invoiceIndex], "invoiceData", {
        checked: false
      });
      let value = {};
      this.getInvoiceDatas(value);
    },
    /*打开发票弹窗*/
    showInvoicePupon(item, index) {
      this.isPresell = false;
      this.invoiceDialog = true;
      item.invoiceData.checked = true;
      this.invoiceIndex = index;
    },
    /*选择发票类型*/
    changeInvoiceType(item) {
      this.ruleForm.receipt_type = item.type;
      if (this.ruleForm.receipt_type == 2) {
        this.invoiceHeaderList = [
          {
            type: "2",
            name: this.$t('page.ticket.enterprise')
          }
        ];
        this.ruleForm.receipt_title_type = 2;
      } else {
        this.invoiceHeaderList = [
          {
            type: "1",
            name: this.$t('page.ticket.personal')
          },
          {
            type: "2",
            name: this.$t('page.ticket.enterprise')
          }
        ];
      }
    },
    /*选择发票抬头*/
    changeInvoiceHeader(item) {
      this.ruleForm.receipt_title_type = item.type;
    },
    /*提交发票信息*/
    confirmInvoice() {
      let that = this;
      let value = that.ruleForm;
      if (!value.receipt_title) return Message.error(this.$t('page.ticket.invoice'));
      if (!value.email) return Message.error(this.$t('message.login.emailEmpty'));
      if (!/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(value.email))
        return Message.error(this.$t('message.login.pleaseemailaccount'));
      if (value.receipt_title_type == 2) {
        if (!value.duty_paragraph) return Message.error(this.$t('page.index.pleasefillinthetaxnumber'));
        if (value.receipt_type == "2") {
          if (!value.bank_name) return Message.error(this.$t('page.index.pleasefillintheaccountopeningbank'));

          if (!value.bank_code) return Message.error(this.$t('page.ticket.bankaccount'));
          if (!value.address) return Message.error(this.$t('page.ticket.companyaddress'));
          if (!value.tel) return Message.error(this.$t('page.ticket.businessphone'));

          if (!/^(\d{9}|\d{14}|\d{18})$/.test(value.bank_code)) {
            return Message.error(this.$t('page.ticket.bankaccount'));
          }

          if (!/(^(\d{3,4})?\d{7,8})$|(13[0-9]{9})/.test(value.tel)) {
            return Message.error(this.$t('page.index.pleasphoneno'));
          }
        }
      }
      value.mer_id = that.cartInfo[that.invoiceIndex]["mer_id"];
      that.cartInfo[that.invoiceIndex]["invoiceData"] = value;
      that.getInvoiceDatas(value);
      that.invoiceDialog = false;
    },
    /*获取开票信息*/
    getInvoiceDatas(value) {
      let that = this;
      that.invoiceData = {};
      that.cartInfo.forEach((item, i) => {
        if (value.mer_id && item.mer_id == value.mer_id) {
          that.$set(that.cartInfo[i], "invoiceData", value);
          that.$set(that.cartInfo[i]["invoiceData"], "checked", true);
          let mer_id = value.mer_id;
          that.invoiceData[mer_id] = value;
        }
      });
    },
    /*修改发票信息*/
    changeInvoiceData(item) {
      this.invoiceDialog = true;
      this.ruleForm = item.invoiceData;
      this.modifyInvoice = true;
    },
    getData(data) {
      this.cartInfo[this.activeIndex] = data;
      if (data.order.isTake) {
        this.take.push(data.mer_id);
      } else {
        this.take.forEach((item, i) => {
          if (data.mer_id == item) {
            this.take.splice(i, 1);
          }
        });
      }
      this.getConfirm(this.addressId);
    },

    getCoupon(coupon) {
      if (coupon.checked) {
        this.subCoupon[coupon.mer_id].forEach((item, i) => {
          if (coupon.coupon_user_id == item) {
            this.subCoupon[coupon.mer_id].splice(i, 1);
          }
        });
      } else {
        this.subCoupon[coupon.mer_id].push(coupon.coupon_user_id);
      }
      this.getConfirm(this.addressId);
    },
    getCityList(pid, fun) {
      this.cityData.list = [];
      this.$axios.get("/api/v2/system/city/lst/" + pid).then(res => {
        this.cityDataOrg = res.data;
        this.cityData.list = res.data;
        fun && fun();
      });
    },
    addAddress() {
      this.dialogVisible = true;
      this.getConfirm();
    },
    // 选择城市
    bindCity(item) {
      let that = this;
      if (that.cityData.step == 4) {
        that.cityData.district = item;
        that.selectedArr.push(item);
        that.isShowSelect = false;
      } else {
        if (that.cityData.step == 1) {
          that.cityData.province = item;
          that.getCityList(item.id, null);
          that.selectedArr = [item];
          that.cityData.step++;
          return;
        }
        if (that.cityData.step == 2) {
          that.cityData.city = item;
          that.getCityList(item.id, null);
          that.cityData.step++;
          that.selectedArr.push(item);
          return;
        }
        if (that.cityData.step == 3) {
          that.cityData.county = item;
          that.selectedArr.push(item);
          that.cityData.step++;
          that.getCityList(item.id, function() {
            if (that.cityData.list && that.cityData.list.length) {
              that.stepStop = false;
              return;
            } else {
              that.stepStop = true;
              that.isShowSelect = false;
              return;
            }
          });
        }
      }
    },
    bindSubmit() {
      if (!this.formData.name) {
        return Message.error(this.$t('page.index.yourname'));
      }
      if (
        !this.formData.phone ||
        !/^[0-9+*\s]{4,26}$/i.test(this.formData.phone)
      ) {
        return Message.error(this.$t('page.index.Pleasecorrectmobile'));
      }
      // if (!this.cityData.province.name) {
      //   return Message.error('请选择省市区')
      // }
      if (!this.formData.con) {
        return Message.error(this.$t('message.login.detail'));
      }
      this.$axios
        .post("/api/user/address/create", {
          // province: this.cityData.province.name,
          // city: this.cityData.city.name,
          // district: this.cityData.district.name,
          area: this.selectedArr,
          city_id: this.cityData.city.city_id,
          is_default: this.formData.checked ? 1 : 0,
          real_name: this.formData.name,
          phone: this.formData.phone,
          detail: this.formData.con,
          address_id: 0
        })
        .then(res => {
          this.addressId = res.data.id;
          this.dialogVisible = false;
          this.getAddressList();
          this.formReset();
          return Message.success(this.$t('page.index.addedsuccessfully'));
        })
        .catch(err => {
          return Message.error(err);
        });
    },
    SubOrder(event) {
      let that = this;
      if (!that.addressId)
        return Message.error(this.$t("page.orderConfirm.setAddress"));
      if (
        that.order_type == 2 &&
        !that.isAgree &&
        that.cartInfo[0].list[0].productPresell.presell_type == 2
      ) {
        return Message.error(this.$t('page.index.tips11'));
      }
      let tempObj = {};
      let btn = event.target;
      btn.disabled = true;
      // 默认选中
      // that.cartInfo.forEach(el => {
      //   tempObj = that.subCoupon[el.mer_id] = {}
      //   tempObj.product = []
      //   tempObj.store = ''
      //   tempObj.product = el.order.use_coupon_product
      //   el.coupon.forEach(coupon => {
      //     if (coupon.coupon.type == 0 && coupon.checked) {
      //       tempObj.store = coupon.coupon_user_id
      //     }
      //   })
      // })
      let mark = that.getRemarks();
      let data = {
        address_id: that.addressId,
        use_coupon: that.subCoupon,
        order_type: that.order_type,
        cart_id: that.cartId.split(","),
        receipt_data: that.invoiceData,
        mark: that.mark,
        takes: that.take,
        pay_type: "pc",
        use_integral: that.use_integral,
        return_url: "http://" + window.location.host + "/user/order_list?type=1"
      };
      data.takes = [];
      that.cartInfo.map(el => {
        if (el.isTake == 1 || el.order.isTake) {
          data.takes.push(el.mer_id);
        }
      });
      that.$axios
        .post("/api/v2/order/create", data)
        .then(res => {
          if (that.totalPrice <= 0) {
            that.$router.replace({ path: "/user/order_list?type=1" });
          } else {
            that.$router.replace({
              path: "/payment",
              query: { result: res.data.order_id }
            });
          }
        })
        .catch(err => {
          btn.disabled = false;
          return Message.error(err);
        });
    },
    /**获取备注 */
    getRemarks() {
      let that = this;
      that.cartInfo.forEach((item, i) => {
        let mer_id = item.mer_id;
        if (item.mark) that.mark[mer_id] = item.mark;
      });
      return this.mark;
    },
    changeIntegral: function(e) {
      this.use_integral = !this.use_integral;
      this.getConfirm(this.addressId);
    },
    getConfirm() {
      let that = this;
      that.$axios
        .post("/api/v2/order/check", {
          cart_id: that.cartId.split(","),
          address_id: that.addressId,
          takes: that.take,
          use_coupon: that.subCoupon,
          use_integral: that.use_integral
        })
        .then(res => {
          let conponNum = 0;
          let totalNum = 0;
          // 默认选中
          // res.data.order.forEach(el => {
          //   el.isTake = 0
          //   totalNum += el.order.total_num;
          //   tempObj = that.subCoupon[el.mer_id] = {}
          //   tempObj.product = []
          //   tempObj.store = ''
          //   tempObj.product = el.order.use_coupon_product
          //   conponNum = that.comsys.Add(conponNum, el.order.coupon_price);
          //   el.coupon.forEach(coupon => {
          //     if (coupon.coupon.type == 0 && coupon.checked) {
          //       tempObj.store = coupon.coupon_user_id
          //     }
          //   })
          // })
          // 默认选中
          res.data.order.forEach(el => {
            el.isTake = 0;
            el.invoiceData = {
              checked: false
            };
            that.subCoupon[el.mer_id] = [];
            el.coupon.forEach(coupon => {
              if (coupon.checked) {
                that.subCoupon[el.mer_id].push(coupon.coupon_user_id);
              }
            });
            totalNum += el.order.total_num;
          });
          that.$set(that, "coupon_price", res.data.order_coupon_price);
          that.$set(that, "cartInfo", res.data.order);
          that.$set(that, "order_type", res.data.order_type);
          that.$set(that, "integral_count", res.data.order_total_integral);
          that.$set(
            that,
            "integral_price",
            res.data.order_total_integral_price
          );
          that.$set(that, "open_integral", res.data.openIntegral);
          that.$set(that, "use_integral", res.data.useIntegral);
          that.totalPrice = res.data.order_price;
          that.orderStatus = res.data.status;
          that.proPrice = res.data.total_price;
          that.coupon_price = conponNum;
          this.coupon_price = conponNum;
          that.order_type = res.data.order_type;
          this.totalNum = totalNum;
        })
        .catch(err => {
          Message.error(err);
          this.$router.go(-1);
        });
    },
    getAddressList() {
      let that = this;
      that.$axios
        .get("/api/user/address/lst", {
          params: {
            page: 1,
            limit: 50
          }
        })
        .then(res => {
          that.addressList = res.data.list;
          that.addressInfo = res.data.list.length > 0 ? res.data.list[0] : {};
          that.addressList.forEach((item, index) => {
            if (item.is_default) {
              that.addressId = item.address_id;
              that.current = index;
            } else {
              that.addressId = that.addressList[0].address_id;
              that.current = 0;
            }
          });
          that.getConfirm();
        });
    },
    tapCurrent(index, item) {
      this.current = index;
      this.addressId = item.address_id;
      this.getConfirm();
    },
    open() {
      this.isShow = true;
    },
    close() {
      this.isShow = false;
    }
  }
};
</script>

<style scoped lang="scss">
.input-item {
  margin-bottom: 20px;
}

.text-wrapper {
  position: relative;
  height: 40px;
  line-height: 40px;
  border: 1px solid #dcdfe6;
  padding: 0 15px;
  box-sizing: border-box;
  border-radius: 4px;
  color: #cfcfcf;

  .select-wrapper {
    z-index: 10;
    position: absolute;
    left: 0;
    top: 45px;
    width: 100%;
    padding: 0 15px;
    background: #fff;
    border: 1px solid #e93323;
    border-radius: 4px;
    line-height: 2;

    .title-box {
      height: 40px;
      line-height: 40px;
      border-bottom: 1px solid #efefef;
      color: #e93323;
      font-size: 14px;

      span {
        margin-right: 8px;
        color: #666666;
      }
    }

    .label-txt {
      margin: 8px 0 18px;
      color: #666666;
      font-size: 14px;

      span {
        margin-right: 10px;
        cursor: pointer;

        &.on {
          color: #e93323;
        }
      }
    }
  }
}
.order_confirm {
  .header {
    height: 60px;
    line-height: 60px;
    color: #999999;

    .home {
      color: #282828;
    }
  }
  .address {
    background-color: #fff;
    .title {
      height: 64px;
      font-size: 18px;
      padding: 0 28px;
      line-height: 64px;
    }
    .lines {
      width: 100%;
      height: 4px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .list {
      padding: 0 25px 26px 25px;
      height: 217px;
      overflow: hidden;
      &.on {
        height: auto;
      }
      .item {
        width: 250px;
        height: 170px;
        border: 1px solid #eaeaea;
        padding: 22px 27px;
        overflow: hidden;
        margin: 30px 0 0 30px;
        position: relative;
        cursor: pointer;
        &.on {
          border-color: #e93323;
        }
        .icon-xuanzhong4 {
          position: absolute;
          right: -4px;
          bottom: -4px;
          font-size: 27px;
        }
        .default {
          position: absolute;
          width: 56px;
          height: 23px;
          font-size: 12px;
          color: #fff;
          text-align: center;
          line-height: 23px;
          top: 0;
          right: 0;
        }
        &.add {
          text-align: center;
          .iconfont {
            font-size: 35px;
            color: #bfbfbf;
            margin-top: 25px;
          }
          .tip {
            color: #c8c8c8;
            margin-top: 8px;
          }
        }

        .name {
          font-size: 16px;
        }

        .phone {
          margin-top: 9px;
        }

        .details {
          color: #999;
          margin-top: 4px;
        }
      }
    }
  }
  .develivery {
    margin-left: 30px;
  }
  .develivery_take {
    margin-left: 100px;
    font-size: 14px;
    font-weight: normal;
    padding-left: 16px;
    position: relative;
    top: -10px;
    padding-bottom: 8px;
    span {
      color: #e93323;
      font-size: 14px;
      position: absolute;
      top: 3px;
      left: 0;
    }
  }
  .deliviery_item {
    margin-right: 12px;
    box-sizing: border-box;
    cursor: pointer;

    .cont {
      position: relative;
      height: 32px;
      border: 1px solid #d3d3d3;
      display: flex;
    }
    &.checked {
      .cont {
        border-color: #e93323;
        color: #e93323;
      }
    }
    .name {
      padding: 0 50px;
      font-size: 16px;
    }
    .iconfont {
      position: absolute;
      right: -2px;
      bottom: -3px;
      font-size: 22px;
    }
  }

  .isShow {
    width: 100%;
    height: 46px;
    line-height: 46px;
    text-align: center;
    color: #707070;
    cursor: pointer;

    .iconfont {
      margin-left: 8px;
      font-size: 12px;
    }
  }

  .wrapper {
    .wrapper_count {
      background-color: #ffffff;
      padding-bottom: 56px;
      &:last-child {
        margin-top: 14px;
      }
    }

    .checkbox-wrapper {
      display: inline-block;
      width: 14px;
      height: 14px;
      margin-right: 10px;
    }
    .money_count {
      margin-right: 30px;
    }
    .money_down {
      color: #fff;
      font-size: 12px;
      line-height: 17px;
      height: 17px;
      background-color: #e93323;
      width: 34px;
      text-align: center;
      border-radius: 3px;
      margin-right: 10px;
    }
    .money_final {
      margin-top: 6px;
      color: #666666;
      font-size: 14px;
    }
    .integral_count {
      padding: 32px 26px;
      border: 1px solid #efefef;
      position: relative;
      .integral_title {
        font-size: 18px;
      }
      .money {
        margin-top: 15px;
        align-items: center;
      }
      .integral_price {
        position: absolute;
        right: 32px;
      }
    }
    .title {
      height: 64px;
      line-height: 64px;
      padding: 0 28px;
      font-size: 18px;
    }
    .cartCount {
      padding: 0 32px 26px;
      margin-bottom: 20px;
      border: 1px solid #efefef;
    }
    .cartInfo {
      padding-top: 30px;
    }
    .storeInfo {
      height: 60px;
      border-bottom: 1px solid #efefef;
      position: relative;

      .qrcode {
        position: absolute;
        background: #fff;
        right: -15px;
        display: none;
        z-index: 10;
        bottom: 60px;
        border: 1px solid #ddd;
        width: 110px;
        height: 110px;
        img {
          width: 100%;
        }
      }
      .name {
        color: #666666;
      }
      .service {
        cursor: pointer;
        .iconfont {
          color: #e93323;
          font-size: 18px;
        }
        &:hover {
          + .qrcode {
            display: inline;
          }
        }
      }
    }
    .order {
      width: 1160px;
      margin: 0 auto;

      .list {
        .item {
          margin-bottom: 26px;

          .txtPic {
            .pictrue {
              width: 62px;
              height: 62px;
              position: relative;
              span {
                display: block;
                width: 100%;
                text-align: center;
                font-size: 12px;
                line-height: 18px;
                background: rgba(0, 0, 0, 0.5);
                position: absolute;
                left: 0;
                bottom: 0;
                color: #fff;
              }
              img {
                width: 100%;
                height: 100%;
              }
            }

            .text {
              max-width: 500px;
              margin-left: 10px;

              .name {
                width: 100%;
              }

              .info {
                margin-top: 12px;
                color: #919191;
              }
              .err-txt {
                margin-top: 12px;
                color: #e93323;
                align-items: center;
                .txt {
                  display: inline-block;
                }
                .icon-tishi {
                  position: relative;
                  top: 1px;
                }
              }
            }
          }
          .ship_date {
            margin-top: 10px;
            color: #fd6523;
          }

          .font-color {
            font-size: 16px;
            font-weight: bold;
            display: inline-block;
            text-align: right;
          }

          .money {
            font-size: 16px;
          }

          .num {
            margin-left: 6px;
          }
        }
      }

      .coupon {
        border-top: 1px solid #efefef;

        .couponTitle {
          font-size: 18px;
          padding: 26px 0;
          position: relative;
          .couponPrice {
            font-size: 16px;
            font-weight: bold;
          }

          .couponPriceNo {
            font-size: 14px;
          }
        }
        &.invoice {
          padding-bottom: 26px;

          .couponTitle {
            padding-bottom: 15px;
          }
        }
        .invoice_info {
          font-size: 14px;
          margin-left: 102px;
          color: #236fe9;
          display: flex;
          align-items: center;
          cursor: pointer;
          .icon-wenhao {
            color: #fff;
            display: inline-block;
            width: 14px;
            height: 14px;
            text-align: center;
            line-height: 14px;
            background-color: #236fe9;
            border-radius: 100%;
            font-size: 8px;
            margin-right: 5px;
          }
        }
        .invoice_data {
          position: absolute;
          right: 0;
          bottom: 20px;
          font-size: 16px;
          display: flex;
          .data_item {
            margin-left: 20px;
            &.modify {
              cursor: pointer;
            }
          }
        }
        .couponList {
          .item {
            height: 40px;
            width: 182px;
            border: 1px solid #e93323;
            margin: 0 15px 15px 0;
            position: relative;
            cursor: pointer;
            &.disabled {
              pointer-events: none;
              opacity: 0.6;
            }
            &.grey {
              border-color: #b4b4b4;
            }

            .iconfont {
              position: absolute;
              right: -2px;
              bottom: -4px;
              font-size: 20px;
            }

            .name {
              width: 70px;
              height: 100%;
              color: #fff;
              text-align: center;
              line-height: 40px;
              background-color: #e93323;

              &.grey {
                background-color: #b4b4b4;
              }
            }

            .money {
              width: 110px;
              text-align: center;
              color: #e93323;

              &.grey {
                color: #b4b4b4;
              }
            }

            &.svip {
              border-color: #333;

              .name {
                background-color: #333;
                color: #fdd7b4;
              }

              .money {
                color: #333;
              }
            }
          }
        }

        .integralCurrent {
          margin-left: 33px;

          .num {
            margin-left: 6px;
          }
        }

        .msgTitle {
          font-size: 18px;
        }
      }

      .message {
        padding-top: 26px;

        .textarea {
          width: 820px;
          height: 120px;
          background-color: #f7f7f7;
          border: 0;
          outline: none;
          resize: none;
          padding: 12px 14px;
          margin-left: 26px;
        }
      }

      .integral {
        padding: 26px 0;
      }
    }

    .totalCon {
      padding: 27px 46px;

      .total {
        & ~ .total {
          margin-top: 12px;
        }

        .money {
          width: 120px;
          text-align: right;
          font-size: 16px;
        }
      }
    }

    .totalAmount {
      width: 1160px;
      height: 70px;
      line-height: 70px;
      background: #f7f7f7;
      text-align: right;
      padding-right: 22px;
      margin: 0 auto;

      .money {
        font-size: 20px;
        font-weight: bold;
        margin-left: 4px;
        width: 120px;
        display: inline-block;
      }
    }

    .bnt {
      margin: 38px 20px 0 0;
      cursor: pointer;

      .submit {
        width: 180px;
        height: 46px;
        border-radius: 4px;
        font-size: 16px;
        color: #fff;
        text-align: center;
        line-height: 46px;
        outline: none;
        border: none;
        background-color: #e93323;
        &:disabled {
          border-color: #fab6b6;
          background-color: #fab6b6;
        }
      }
    }
  }
}
.presell_protocol {
  cursor: pointer;
}
.check_protocal .icon {
  border-radius: 0;
  width: 16px;
  height: 16px;
}
.invoice_description img {
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 100%;
}
.invoice_data_container {
  padding-left: 26px;
  padding-right: 26px;
}
.invoice_item {
  box-sizing: border-box;
  cursor: pointer;
  margin-right: 14px;
  &:last-child {
    margin-right: 0;
  }
  .cont {
    position: relative;
    height: 32px;
    border: 1px solid #d3d3d3;
    display: flex;
    align-items: center;
  }
  &.checked {
    .cont {
      border-color: #e93323;
      color: #e93323;
    }
    .iconfont {
      display: block;
    }
  }
  .name {
    padding: 0 40px;
    font-size: 14px;
    line-height: 32px;
  }
  .iconfont {
    position: absolute;
    right: -3px;
    bottom: -12px;
    font-size: 22px;
    display: none;
  }
}
.invoice_type_info {
  font-size: 12px;
  color: #999999;
  line-height: 20px;
  margin-top: 10px;
}
</style>
